<template>
  <div id="footer"
    :class="{animate__animated: currentRoute == '/'}"
    class="animate__fadeInUpBig">
    <b-container class="text-center" >
      <b-nav class="footer-nav">
        <b-nav-item
          v-for="(item, index) in list"
          :key="index"
          @click="goto(item)">
          {{item.title}}
        </b-nav-item>
      </b-nav>
      <div class="info">{{record}}</div>
      <div class="info">{{copyright}}</div>
    </b-container>
  </div>
</template>

<script>
export default {
  name: 'GFooter',
  data () {
    return {
      copyright: '©2020 国艺文津新媒体科技(北京)有限公司版权所有',
      record: '备案号：鄂ICP备20008738号-1',
      list: [
        {title: '新闻中心', href: '/news'},
        {title: '产品服务', href: '/product'},
        {title: '典型案例', href: '/cases'},
        {title: '关于我们', href: '/about'},
      ],
      currentRoute: ''
    }
  },
  created () {
    this.currentRoute = this.$route.path
  },
  methods: {
    goto (url) {
      this.$router.push(url.href)
    }
  },
  watch: {
    '$route.path' (newval) {
      this.currentRoute = newval
    }
  }
}
</script>

<style lang="scss">
#footer {
  padding: 20px 0;
  background: #3c4449;
  color: #fff;
  font-size: 12px;
  a {
    text-decoration: none;
    color: inherit;
    padding: 0 5px;
    color: #fff;
  }
  .footer-nav {
    justify-content: center;
  }
  .info {
    margin-top: 5px;
  }
}
</style>